<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
        }

        @media only screen and (min-width: 769px) {
            .swiper-slide:first-child {
                transition: transform 100ms;
            }

            .swiper-slide:first-child img {
                transition: box-shadow 500ms;
            }

            .swiper-slide.swiper-slide-active:first-child {
                transform: translateX(50%);
                z-index: 2;
            }

            .swiper-slide.swiper-slide-active:first-child img {
                box-shadow: 0px 32px 80px rgba(0, 0, 0, 0.35);
            }

            .swiper-slide:nth-child(2) {
                transition: transform 100ms;
            }

            .swiper-slide.swiper-slide-next:nth-child(2) {
                transform: translateX(55%);
                z-index: 1;
            }

            .swiper[dir="rtl"] .swiper-slide.swiper-slide-active:first-child {
                transform: translateX(-50%);
            }

            .swiper[dir="rtl"] .swiper-slide.swiper-slide-next:nth-child(2) {
                transform: translateX(-55%);
            }
        }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../图片素材/05761e65f655c84853c27bb7598210d.jpg" width="500px" height="500px">
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/085719eb6d3fffa555dc983a014468f.jpg" width="500px" height="500px" />
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/1ea5cf891bb509b94e7e0687933517e.jpg" width="500px" height="500px" />
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/24adca5d0882af6aaa30d596386e890.png" width="500px" height="500px" />
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/30年.jpg" width="500px" height="500px" />
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/31b356e558a901bdf7d9c2a693314d5.jpg" width="500px" height="500px" />
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/453789bbfd01f8f781d093e49bbb65d.jpg" width="500px" height="500px" />
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/50e8b4ddba05e343bc4502ead3bea8b.jpg" width="500px" height="500px" />
            </div>
            <div class="swiper-slide">
                <img src="../图片素材/781e7923fe4a85bd5b5cbf8fbde6c2b.jpg" width="500px" height="500px" />
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-scrollbar"></div>
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            slidesPerView: 1,
            centeredSlides: false,
            slidesPerGroupSkip: 1,
            grabCursor: true,
            keyboard: {
                enabled: true,
            },
            breakpoints: {
                769: {
                    slidesPerView: 2,
                    slidesPerGroup: 2,
                },
            },
            scrollbar: {
                el: ".swiper-scrollbar",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    </script>
</body>

</html>